{% extends 'layout.html' %}
{% block body %}
    <!-- 简介部分 -->
    <div class="flex mb-8 border-b border-gray-400 py-8">
      <div class="mr-6">
        <img src="{{ url_for('static', filename='images/code.png') }}" width="80px" alt="">
      </div>
      <div>
        <div class="text-white text-2xl">
          AI写代码 ....
        </div>
        <div class="text-white">
          左侧输入需求, 点击Run, 右侧将会显示创作后的结果,
          如果没有写完，可以点击Continue按钮继续编写,
          可以点击Clear清除前面内容.
        </div>
      </div>
    </div>
    <!-- 主题内容 -->
    <div class="flex  h-full max-h-[calc(100%-400px)]">
      <div class="w-2/5  border-gray-600">
        <form action="/create_img" class="w-full h-full">
            <textarea class="outline-none w-full h-full px-6 bg-primary-100 text-white rounded-lg" 
                      name="query" id="query" placeholder="请输入描述信息"></textarea>
        </form>
      </div>
      <div class="w-1/5  flex flex-col justify-center mx-auto">
        <div class="btn_box">
          <button type="button" id="run"  class="btn">Run</button>
        </div>
        <div class="btn_box">
         <button id="continue" type="button" class="btn">Continue</button>
        </div>
        <div class="btn_box">
          <button type="button" id="clear" class="btn">Clear</button>
         </div>
      </div>
      <div class="w-2/5">
          <div id="result" class="h-full px-6 bg-primary-100 text-white rounded-lg whitespace-pre-wrap overflow-auto">
            
          </div>
      </div>
    </div>
  </div>

  <script>
    // 点击run，执行
    $('#run').click(function(){
      // 获取输入框的内容
      var query = $('#query').val();
      if ( query == ''){
          show_error('请填写描述信息');
          return false;
        }
      // 清空右侧现有内容
      $('#result').html('');
      // 弹出正在创作
      show_info('开始编写代码')
      // 提交表单
      $.ajax({
        url: '/write_code',
        type: 'post',
        data: {'query': query},
        dataType: 'json',
        success: function(res){
          if (res.status_code == 1){
            $("#result").html(res.content)
          } else {
            show_error(res.content)
          }
        },
        error:function (res) {
            show_error('请求失败')
        }
      })
    })

    // 点击继续
    $('#continue').click(function(){
      var query = $('#query').val();
      var result = $('#result').html();
      $.ajax({
        url: '/write_code',
        type: 'post',
        data: {'query': query + '\n\n' + result + '\n\n继续\n\n'},
        dataType: 'json',
        success: function(res){
          if (res.status_code == 1){
            $("#result").append('\n\n'+res.content);
          } else {
            show_error(res.content)
          }
        },
        error:function (res) {
            show_error('请求失败')
        }
      })
    }) 
    
    // 点击clear按钮
    $('#clear').click(function(){
      $('#query').val('');    // 清除左侧
      $('#result').html('');  // 清除右侧
    })


  </script>
{% endblock %}